<template>
	<view>
		<view class="header">
			<view class="logo">
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<form @submit="submit">
			<view class="login-box">
				<view class="item-input">
					<image src="../../static/login/inputPerson.png" mode="widthFix"></image>
					<input type="text" name="username" placeholder="请输入账号" placeholder-class="plStyle" />
					<view></view>
				</view>
				<view class="item-input">
					<image src="../../static/login/inputPerson.png" mode="widthFix"></image>
					<input type="text" name="phone" v-model="phone" placeholder="请输入手机号" placeholder-class="plStyle" />
					<view></view>
				</view>
				<view class="item-input">
					<image src="../../static/login/inputCode.png" mode="widthFix" style="width: 38rpx;"></image>
					<input type="text" name="code" placeholder="请输入验证码" placeholder-class="plStyle" />
					<view @tap="getVCode" style="font-size: 28rpx;color: #0081ff;">{{vcodeBtnName}}</view>
				</view>
				<view class="item-input">
					<image src="../../static/login/inputPwd.png" mode="widthFix"></image>
					<input type="text" v-model="password" :password="isPwdLook?true:false"
						name="password" placeholder="请输入新密码" placeholder-class="plStyle" />
					<view>
						<image :src="`../../static/login/${isPwdLook?'close_eye.png':'open_eye.png'}`" mode="widthFix"
							@tap="lookPwd"></image>
					</view>
				</view>
				<view class="item-input">
					<image src="../../static/login/inputPwd.png" mode="widthFix"></image>
					<input type="text" :password="isPwdLook2?true:false" name="confirmPassword" placeholder="请确认新密码"
						placeholder-class="plStyle" />
					<view>
						<image :src="`../../static/login/${isPwdLook2?'close_eye.png':'open_eye.png'}`" mode="widthFix"
							@tap="lookPwd2"></image>
					</view>
				</view>
				<button class="saveBtn" formType="submit">完成</button>
			</view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				phone: '', //手机号码
				vcodeBtnName: "发送验证码",
				countNum: 120,
				countDownTimer: null,
				isPwdLook: true,
				isPwdLook2: true,
				password: '',
			}
		},
		onLoad() {

		},
		methods: {
			lookPwd() {
				this.isPwdLook = !this.isPwdLook
			},
			lookPwd2() {
				this.isPwdLook2 = !this.isPwdLook2
			},
			radioChange: function(e) {
				console.log(e);
			},
			submit: function(e) {
				
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "notnull",
						errorMsg: "请输入账号"
					},{
						name: "phone",
						checkType: "phoneno",
						errorMsg: "请正确输入手机号码"
					},
					{
						name: "code",
						checkType: "notnull",
						errorMsg: "请输入验证码"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,",
						errorMsg: "密码至少6个字符"
					},
					{
						name: "confirmPassword",
						checkType: "samewith",
						checkRule: "password",
						errorMsg: "两次密码输入不一致"
					},
				];
				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				// formData.name5 = this.formData.name5;
				console.log(formData);
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.$http.post('/api/worker/login/forget/password', formData).then(res => {
						if (res.data.code == 200) {
							console.log(res.data.data)
							this.$u.msg('找回密码成功，请重新登录！')
							this.$u.back(1, 1000)
						} else {
							this.$u.msg(res.data.msg)
						}
					})
				} else {
					this.$u.msg(graceChecker.error)
				}

			},
			getVCode: function() { //获取验证码
				var myreg = /^[1][0-9]{10}$/;
				if (!myreg.test(this.phone)) {
					this.$u.msg('请正确填写手机号码')
					return false;
				}
				// 手机号码为 :  this.phone
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				this.$http.get(`/api/common/sms/${this.phone}`).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						// 假设发送成功，给用户提示
						this.$u.msg('短信已发送，请注意查收')
					} else {
						this.$u.msg(res.data.msg)
					}
				})
				// 倒计时
				this.countNum = 60;
				this.countDownTimer = setInterval(() => {
					this.countDown();
				}, 1000);
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.header {
		height: 550rpx;
		background: url(../../static/login/loginBg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;

		image {
			width: 180rpx;
			border-radius: 15rpx;
			margin-top: 120rpx;
		}
	}

	.login-box {
		width: 630rpx;
		background: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		top: -200rpx;
		box-sizing: border-box;
		padding: 50rpx 35rpx;
		box-shadow: 2rpx 2rpx 20rpx #f3f3f3;

		.item-input {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f5f5f5;
			border-radius: 15rpx;
			padding: 26rpx 40rpx;
			margin-bottom: 25rpx;

			image {
				width: 35rpx;
			}

			input {
				width: 250rpx;
			}

			view {
				width: 150rpx;
				text-align: right;
			}
		}

		.item-tool {
			font-size: 26rpx;
			color: #999;
		}

		.saveBtn {
			margin: 20rpx 0;
			margin-top: 50rpx;
		}
	}
</style>
